<script >
import axios from "axios";

export default {
  data() {
    return {
      user:{},
      userxx:{},
      balance:null,
      status:'',
      statusOptions:{
        '待审核': '待审核',
        '已驳回': '已驳回',
        '已打款': '已打款'
      },
      tixian:[],
      tixian2:[]
    };
  },
  methods: {
   find(){
     axios.post('play/order-details/list').then(response => {
       this.tixian = response.data.data;
       this.tixian.filter((item) => item.uid==this.user.id)
       this.tixian2= this.tixian;
    })
   },
    zhuan(a){
     //将时间戳转换为日期时间类型
      var date = new Date(a);
      return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
    },
    b(a){
      this.status = a;
      if (a=='待审核') {
       a=0;
      }
      if (a=='已驳回') {
       a=2;
      }
      if (a=='已打款') {
       a=1;
      }

      alert(this.status)
      this.tixian2= this.tixian.filter((item) => item.status==a)
    },
fan(){
     this.$router.push({ path: '/mine' })
}

  },
  created() {
    this.user.id =  JSON.parse(sessionStorage.getItem('id'));
    this.find()
    const a = this.$route.query.a;
    if (a) {
      this.userxx = JSON.parse(a);
    }
  },
};
</script>

<template>
  <div >
    <div class="status" >
      <span style="margin-right: 50px" v-for="s in statusOptions" :class="{ active: s === status }" @click="b(s)">{{ s }}</span>
    </div>
    <div class="withdrawal-container" v-for="i in tixian2" >
      <span>提现: +￥{{ i.price }}</span><br>
      <span>申请时间: {{ zhuan(i.createtime) }}</span><br>
      <span>申请状态: {{ i.status==0?'待审核':i.status==1?'已打款':'已驳回' }}</span><br>
    </div>
    <button @click="fan">返回</button>
  </div>
</template>

<style >
.withdrawal-container {
  width: 300px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-left: 40px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

h2 {
  text-align: center;
}

p {
  text-align: center;
  margin: 10px 0;
}

.withdrawal-amount {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.withdrawal-method {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.method-selected {
  color: green;
}

.checkmark {
  margin-left: 5px;
}

.withdraw-now {
  background-color: #007BFF;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  width: 100%;
  cursor: pointer;
}

.withdrawal-records {
  display: block;
  text-align: center;
  margin-top: 10px;
  text-decoration: none;
  color: #007BFF;
}
</style>
